﻿@model RentHouse.DTO.HouseDetailDTO
@{
    ViewBag.Title = "Detail";
}
<link href="~/css/mui.picker.min.css" rel="stylesheet" />
<div class="headertwo clearfloat" id="header">
    <a href="javascript:history.go(-1)" class="fl box-s"><i class="iconfont icon-arrow-l fl"></i></a>
    <p class="fl">房源详情</p>
    <a href="#" class="fr" onClick="toshare()"><i class="iconfont icon-fenxiang fl"></i></a>
</div>

<!--分享内容-->
<div class="am-share">
    <h3 class="am-share-title">分享到</h3>
    <ul class="am-share-sns">
        <li><a href="#"> <i class="iconfont icon-weixin weixin"></i> <span>微信</span> </a> </li>
        <li><a href="#"> <i class="iconfont icon-qq qq"></i> <span>QQ</span> </a> </li>
        <li><a href="#"> <i class="iconfont icon-weibo weibo"></i> <span>微博</span> </a> </li>
        <li><a href="#"> <i class="iconfont icon-renrenwang renren"></i> <span>人人</span> </a> </li>
    </ul>
    <div class="am-share-footer"><button class="share_btn">取消</button></div>
</div>

<div class="clearfloat" id="main">
    <div class="service clearfloat">
        <div class="slider one-time">
            @foreach (var item in Model.HousePics)
            {
                <div>
                    <img src="@ViewBag.ServerIP@item.Url" />
                    <div class="tit clearfloat box-s">
                        <p class="one">@Model.CommunityName</p>
                        <p class="two">@Model.LocationName</p>
                    </div>
                </div>
            }


        </div>
    </div>
    <div class="service-top clearfloat box-s">
        <div class="left fl clearfloat box-s">
            <p class="tit titwo">@Model.MonthRent<span>元/月</span></p>
            <p class="fu-tit">@Model.RoomTypeName   |  @Model.Area m²  |  @Model.DecorateStatusName | @Model.TypeName </p>
        </div>
        <div class="right fl clearfloat">
            <i class="iconfont icon-shoucang"></i>
            <p>收藏</p>
        </div>
    </div>

    <div class="service-ctent clearfloat">
        <div class="recom-tit clearfloat box-s">
            <p>房屋信息</p>
        </div>
        <div class="service-list clearfloat box-s">
            <ul>
                <li>类型：@Model.TypeName</li>
                <li>朝向：@Model.Direction</li>
                <li>楼层：@Model.FloorIndex / @Model.TotalFloorCount </li>
                <li>装修：@Model.DecorateStatusName</li>
                <li>现状：@Model.StatusName</li>
                <li>可入驻：@Model.CheckInDateTime</li>
                <li>建造年代：@Model.CommunityBuiltYear 年</li>
                <li>可看房：@Model.LookableDateTime 以后</li>
            </ul>
            <p class="service-tit">交通：@Model.CommunityTraffic</p>
        </div>
    </div>

    <div class="service-ctent clearfloat">
        <div class="recom-tit clearfloat box-s">
            <p>配置设施</p>
        </div>
        <div class="service-ties clearfloat box-s">
            <ul>
                @foreach (var item in Model.Attachments)
                {
                    <li><i class="iconfont @item.IconName"></i>@item.Name</li>
                }

            </ul>
        </div>
    </div>

    <div class="service-ctent clearfloat">
        <div class="recom-tit clearfloat box-s">
            <p>房源描述</p>
        </div>
        <p class="tit box-s">
            @Html.Raw(Model.Description)
        </p>
    </div>

    <div class="service-ctent clearfloat">
        <div class="recom-tit clearfloat box-s">
            <p>相似好房</p>
        </div>
        <div class="recom-xia clearfloat box-s">
            @foreach (var item in Model.OtherHouses)
            {
                <div class="list clearfloat fl">
                    <a href="house-details.html">
                        <div class="tu">
                            <span></span>
                            <img src="@ViewBag.ServerIP@item.FirstThumbUrl" />
                        </div>
                        <div class="bottom clearfloat">
                            <div class="top clearfloat">
                                <p class="biaoti">@item.CommunityName</p>
                                <p class="price">@item.MonthRent<span>元/月</span></p>
                            </div>
                            <p class="fu-tit">
                                @item.RoomTypeName   |  (@item.Area)m²  |  @item.DecorateStatusName
                            </p>
                        </div>
                    </a>
                </div>
            }


        </div>
    </div>

</div>


<div class="footer-look clearfloat" id="footer">
    <a href="#loginmodal" id="modaltrigger">我要看房</a>
</div>


<!--弹窗内容 star-->
<div id="loginmodal" class="box-s loginmodal" style="display:none;">
    <form id="loginform" name="loginform" method="post" action="">
        <div class="center"><input type="button" name="loginbtn" id="loginbtn" class="flatbtn-blu hidemodal" value="" tabindex="3"></div>
    </form>
    <div class="top clearfloat box-s">
        填写信息
    </div>
    <div class="bottom clearfloat box-s">
        <ul>
            <li class="clearfloat">
                <i class="iconfont icon-user"></i>
                <input type="text" name="" id="txt_Name" value="" placeholder="您的姓名" />
            </li>
            <li class="clearfloat">
                <i class="iconfont icon-phone"></i>
                <input type="text" name="" id="txt_Mobile" value="" placeholder="您的手机号码" />
            </li>
            <li class="clearfloat">
                <i class="iconfont icon-calendar"></i>
                <input type="text" name="" id="visitDate" value="" placeholder="请选择看房时间" />
            </li>
        </ul>
        <input type="button" name="" id="btn_App" value="立即预约" class="btn" />
    </div>
</div>
<!--弹窗内容 end-->
@section scripts
{
    <script type="text/javascript" src="/slick/slick.min.js"></script>
    <script type="text/javascript" src="/js/jquery.leanModal.min.js"></script>
    <script type="text/javascript" src="/js/tchuang.js"></script>
    <script src="~/js/mui.picker.min.js"></script>
    <script type="text/javascript">
        $('.one-time').slick({
            dots: true,
            infinite: false,
            speed: 300,
            slidesToShow: 1,
            touchMove: false,
            slidesToScroll: 1
        });
    </script>
    <!--分享js-->
    <script type="text/javascript">
        function toshare() {
            $(".am-share").addClass("am-modal-active");
            if ($(".sharebg").length > 0) {
                $(".sharebg").addClass("sharebg-active");
            } else {
                $("body").append('<div class="sharebg"></div>');
                $(".sharebg").addClass("sharebg-active");
            }
            $(".sharebg-active,.share_btn").click(function () {
                $(".am-share").removeClass("am-modal-active");
                setTimeout(function () {
                    $(".sharebg-active").removeClass("sharebg-active");
                    $(".sharebg").remove();
                }, 300);
            })
        }



        $(function () {

            //点击预约时间文本框弹出日期选择器
            $("#visitDate").click(function () {

                var dtPicker = new mui.DtPicker({ type: 'date' });
                dtPicker.show(function (selectItems) {
                    var y = selectItems.y.text;
                    var m = selectItems.m.text;
                    var d = selectItems.d.text;
                    var visitDate = y + "-" + m + "-" + d;
                    $("#visitDate").val(visitDate);
                })

            });


            //提交预约记录
            $("#btn_App").click(function () {
                //获取用户输入的信息
                var name = $("#txt_Name").val();
                var mobile = $("#txt_Mobile").val();
                var visitDate = $("#visitDate").val();
                var houseId =@Model.Id;
                $.post("/House/Add", { Name: name, PhoneNum: mobile, VisitDate: visitDate, HouseId: houseId }, function (data) {
                    if (data.State == 1) {
                        //弹出成功提示
                        layer.open({
                            content: data.ErrorMessage
                            , btn: '我知道了',
                            yes: function (index) {
                                //关闭窗口
                                $("#lean_overlay").fadeOut(200);
                                $("#loginmodal").hide();
                                layer.close(index);
                            }
                        });
                    }
                    else {
                        //弹出错误提示
                        layer.open({
                            content: data.ErrorMessage
                            , btn: '我知道了'
                        });
                    }

                }, "json");

            });
        })


    </script>
}